<template>
  <div>
    <h1>father</h1>
    <!-- <input v-model="msg" type="text"> -->
    <input :value="msg" type="text" @input="handleInput">
    <!-- v-model 在组件中 双向绑定, 只能绑定一个 -->
    <children-component v-model="msg" />

    <!-- sync 修饰符 -->
    <!-- 使用 sync 修饰符 绑定数据, 可以绑定多个 -->
    <!-- sync 是 属性 aaa 和 update:aaa 事件的默认语法糖 -->
    <h3>父组件 count 的值: {{ count }}</h3>
    <children-component :aaa.sync="count" :bbb.sync="num" />
    <!-- .sync 修饰符就相当于下面写法的简写 -->
    <!-- <children-component :aaa="count" @update:aaa="事件处理函数" /> -->

    <children-component />
  </div>
</template>

<script>
import ChildrenComponent from './ChildrenComponent.vue'
export default {
  components: { ChildrenComponent },
  data() {
    return {
      msg: '测试',
      count: 10,
      num: 20,
      obj: {
        name: '佩奇',
        age: 20
      }
    }
  },
  methods: {
    handleInput(e) {
      this.msg = e.target.value
    }
  }
}
</script>

<style>

</style>
